<template>
	<view>
		<view class="containers">
			<view class="tipBgc" :style="{ backgroundImage: `url(${setColor})` }">
				<view class="status">
					<view class="left">
						{{info.state == 0 ? '待支付' : info.state == 1 ? '待发货' :info.state == 2 ? '已发货':info.state == 3 ? '已完成':'已取消'}}
					</view>
					<view class="right">
						<image src="/static/order/logo.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="address">
					<view class="name">{{info.receiver}} {{info.receiverPhone}}</view>
					<view class="addressd">
						<image src="/static/order/address.png" mode=""></image>
						<text>{{info.province}} {{info.city}} {{info.county}} {{info.detailAddress}}</text>
					</view>
				</view>
				<view class="goods">
					<view class="title">订单商品</view>
					<view class="goodsInfo">
						<view class="leftInfo">
							<view class="img">
								<image :src="info.coverUrl" mode=""></image>
							</view>

							<view class="center">
								<view class="top">{{info.goodsName}}</view>
								<view class="number">数量：x{{info.quantity}} 规格：{{info.spec}}</view>
							</view>
						</view>
						<view class="price">￥{{info.payPrice}}</view>
					</view>
				</view>
				<view class="orderInfo">
					<view class="title">订单信息</view>
					<view class="titles"><text>订单编号</text>{{info.orderNo}}</view>
					<view class="titles"><text>下单时间</text>{{info.payTime}}</view>
					<view class="titles">
						<text>订单类型</text>{{info.orderType == 1 ? '提货订单' : info.orderType == 2 ? '生活订单' :info.orderType == 3 ? '会员礼包':info.orderType == 4 ? '配额订单':info.orderType == 5 ? '提货订单':info.orderType == 6 ? '首页订单':'助力商城'}}
					</view>
					<view class="titles">
						<text>物流单号</text>
						<view class="number">
							<view class="number-item" v-for="(item,index) in info.logisticsOrderNo">
								{{item}}
								<text class="copy" @click="copyNum(item)">复制</text>
							</view>
						</view>

					</view>

					<view class="titles"><text>物流进度</text>
						<view class="look" @click="open(info)">查看物流</view>
					</view>
				</view>
			</view>
			<!-- 物流弹窗 -->
			<uni-popup ref="address" :mask-click="false">
				<div class='addressPopupBox'>
					<div class='goodsInfoBox'>
						<image class='goodsMainImage' :src="goodsInfo.coverUrl||goodsInfo.imageUrl" alt="" />

						<div class='logistics-info'>
							<div class='logistics-state'>
								{{logisticsInformation.state==7?'转投':logisticsInformation.state==0?'在途':logisticsInformation.state==1?'揽收':logisticsInformation.state==2?'疑难':logisticsInformation.state==3?'签收':logisticsInformation.state==4?'退签':logisticsInformation.state==5?'派件':logisticsInformation.state==6?'退回':logisticsInformation.state==8?'清关':logisticsInformation.state==14?'拒签':'已发货'}}
							</div>
							<div class='logistics-kuaidi' v-if='logisticsInformation.expressName'>
								{{logisticsInformation.expressName}}：{{logisticsInformation.number}}
							</div>
						</div>
					</div>
					<div class='logistics-list-contaner'>
						<div class='logistics-list'>
							<div v-if='logisticsInformation.data'>
								<div class='address' v-for="(item,index) in logisticsInformation.data" :key="item.time">

									<div class='takeState' v-if='index==0'>
										{{logisticsInformation.state==7?'转投':logisticsInformation.state==0?'在途':logisticsInformation.state==1?'揽收':logisticsInformation.state==2?'疑难':logisticsInformation.state==3?'签收':logisticsInformation.state==4?'退签':logisticsInformation.state==5?'派件':logisticsInformation.state==6?'退回':logisticsInformation.state==8?'清关':logisticsInformation.state==14?'拒签':''}}
									</div>
									<div class='takeState1' v-else>
									</div>
									<div class='text qianshou'>
										<div class='text-A'>
											{{item.ftime}}
										</div>
										<div class='logistics-msg'>
											{{item.context}}
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>


					<div class='iconImage' @click="handleClosePopupIcon">
						<image class='closeAddressIcon' src="@/static/mine/closeAddressIcon.png" alt="" />
					</div>
				</div>
			</uni-popup>


		</view>
	</view>
</template>

<script>
	import {
		getGoodsOrderDetail,
		getOrderLogisticsInfo2,
		getOrderLogisticsInfo
	} from "../../../api/api.js"
	export default {
		data() {
			return {
				id: '',
				info: {},
				setColor: '',
				goodsInfo: {},
				logisticsInformation: '',
			};
		},
		onLoad(options) {
			this.id = options.id
			if (options.id) {
				this.getDetails()
			}
		},
		methods: {
			getDetails() {
				const data = {
					id: this.id
				}
				getGoodsOrderDetail(data).then(res => {
					this.info = res.data
					if (res.data.state == 4) {
						this.setColor = '/static/order/topBgc2.png'
					} else {
						this.setColor = '/static/order/topBgc.png'
					}
					if (this.info.logisticsOrderNo) {
						this.info.logisticsOrderNo = this.info.logisticsOrderNo.replace(/[\uff0c]/g, ",").split(
							',')
					}


				})
			},
			copyNum(info) {
				uni.showModal({
					content: info,
					confirmText: '复制内容',
					success: (res) => {
						if (res.confirm) {
							let result
							// #ifndef H5
							uni.setClipboardData({
								data: info,
								success: () => {
									uni.showToast({
										title: '复制成功'
									})
								}
							});
							// #endif

							// #ifdef H5 
							let textarea = document.createElement("textarea")
							textarea.value = info
							textarea.readOnly = "readOnly"
							document.body.appendChild(textarea)
							textarea.select() // 选中文本内容
							textarea.setSelectionRange(0, info.length)
							uni.showToast({ //提示
								title: '复制成功'
							})
							result = document.execCommand("copy")
							textarea.remove()
							// #endif
						} else {}
					}
				});
			},
			open(item) {
				this.goodsInfo = item
				getOrderLogisticsInfo({
					orderId: item.id
				}).then(res => {
					this.logisticsInformation = res.data
					console.log(res)
				})
				this.$refs.address.open('center')
			},
			handleClosePopupIcon() {
				this.$refs.address.close()
			},
		}
	}
</script>

<style lang="less">
	page {
		background-color: #F4F4F4;
	}

	.containers {
		background-color: #F4F4F4;
		position: relative;

		.tipBgc {
			// background-image: url(/static/order/topBgc.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			width: 100%;
			height: 270rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;

			.status {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 32rpx 80rpx;

				.left {
					font-weight: 500;
					font-size: 34rpx;
					color: #FFFFFF;
				}

				.right {
					image {
						width: 112rpx;
						height: 83rpx;
					}
				}
			}
		}

		.content {
			padding: 148rpx 24rpx 0 24rpx;
			position: relative;
			z-index: 2;
		}

		.address {
			width: calc(100% - 60rpx);
			background-color: #fff;
			border-radius: 24rpx;
			padding: 44rpx 30rpx;

			.name {
				font-weight: 500;
				font-size: 30rpx;
				color: #181A1C;
			}

			.addressd {
				margin-top: 12rpx;
				display: flex;
				align-items: center;

				image {
					width: 34rpx;
					height: 34rpx;
					transform: translateX(-5rpx);
				}

				text {
					font-weight: 400;
					font-size: 28rpx;
					color: #181A1C;
					margin-left: 5rpx;
				}
			}

		}

		.goods {
			background-color: #fff;
			width: calc(100% - 60rpx);
			padding: 27rpx 30rpx;
			border-radius: 24rpx;
			margin-top: 24rpx;

			.title {
				font-weight: 500;
				font-size: 30rpx;
				color: #181A1C;
			}

			.goodsInfo {
				display: flex;
				// align-items: center;
				justify-content: space-between;
				margin-top: 26rpx;

				.leftInfo {
					display: flex;
					align-items: center;

					.img {
						flex: 1;

						image {
							width: 120rpx;
							height: 120rpx;
							border-radius: 12rpx;
						}
					}

					.center {
						margin-left: 20rpx;

						.top {
							font-weight: 500;
							font-size: 28rpx;
							color: #181A1C;
						}

						.number {
							font-weight: 400;
							font-size: 26rpx;
							color: #999999;
							margin-top: 25rpx;
						}
					}
				}

				.price {
					font-weight: 500;
					font-size: 28rpx;
					color: #181A1C;
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
					transform: translateY(-25rpx);
				}
			}

		}

		.orderInfo {
			background-color: #FFFFFF;
			padding: 27rpx 39rpx;
			border-radius: 24rpx;
			margin-top: 26rpx;

			.title {
				font-weight: 500;
				font-size: 30rpx;
				color: #181A1C;
				margin-bottom: 26rpx;
			}

			.titles {
				white-space: nowrap;
				font-weight: 400;
				font-size: 28rpx;
				color: #181A1C;
				margin-top: 14rpx;
				display: flex;
				// align-items: center;
				line-height: 40rpx;

				text {
					font-size: 28rpx;
					color: #999999;
					line-height: 40rpx;
					margin-right: 59rpx;
				}

				.look {
					width: 130rpx;
					height: 46rpx;
					background: #E4F8EA;
					border-radius: 23rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #46D970;
					text-align: center;
					line-height: 46rpx;
				}

				.copy {
					// width: 130rpx;
					height: 46rpx;
					padding: 0 20rpx;
					background: #E4F8EA;
					border-radius: 23rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #46D970;
					text-align: center;
					line-height: 46rpx;
					margin-left: 20rpx;
				}
			}
		}
	}

	.addressPopupBox {
		width: 694rpx;
		height: 1000rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		position: relative;
		padding: 34rpx 28rpx;
		box-sizing: border-box;

		.goodsInfoBox {
			padding-bottom: 28rpx;
			box-sizing: border-box;
			border-bottom: 2rpx solid #F2F2F2;
			display: flex;

			.goodsMainImage {
				width: 120rpx;
				height: 120rpx;
				background: #F9F9F9;
				border-radius: 8rpx;
				overflow: hidden;
				margin-right: 20rpx;
			}

			.logistics-info {
				display: flex;
				flex: 1;
				height: 120rpx;
				justify-content: space-between;
				flex-direction: column;

				.logistics-state {
					font-weight: 600;
					font-size: 40rpx;
					color: #151822;
				}

				.logistics-kuaidi {
					font-weight: 400;
					font-size: 24rpx;
					color: #484A51;
				}
			}
		}

		.logistics-list-contaner {
			position: relative;
			overflow: hidden;
		}

		// .logistics-list-contaner :before {
		// 	content: '';
		// 	width: 4rpx;
		// 	height: 73%;
		// 	border-left: 2rpx dashed #00CBCE;
		// 	display: block;
		// 	position: absolute;
		// 	top: 60rpx;
		// 	left: 76rpx;
		// }

		.logistics-list {
			display: flex;
			flex-direction: column;
			padding: 38rpx 36rpx;
			box-sizing: border-box;
			height: 750rpx;
			overflow-y: auto;

			.address {

				display: flex;
				margin-bottom: 40rpx;
				position: relative;

				.takeState1 {
					margin-right: 20rpx;
					width: 16rpx;
					height: 16rpx;
					margin-left: 35rpx;
					margin-top: 20rpx;
					background: #898A8F;
					border-radius: 16rpx;
					overflow: hidden;
					font-weight: 500;
					font-size: 24rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #FFFFFF;
					margin-right: 50rpx;
				}

				.takeState {
					min-width: 84rpx;
					height: 40rpx;
					background: #00CBCE;
					border-radius: 24rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					display: flex;
					flex: 1;
					justify-content: center;
					align-items: center;
					margin-right: 20rpx;
				}


				.takeState2 {
					min-width: 84rpx;
					height: 40rpx;
					background: #00CBCE;
					border-radius: 24rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					display: flex;
					flex: 1;
					justify-content: center;
					align-items: center;
					margin-right: 20rpx;
				}

				.paisong {
					background: #898A8F;
				}

				.qianshou {
					padding-top: 10rpx;
					box-sizing: border-box;

					.text-A {
						font-weight: 400;
						font-size: 24rpx;
						color: #484A51;
						margin-bottom: 8rpx;

						span {
							font-weight: 500;
							font-size: 24rpx;
							color: #898A8F !important;
							margin-right: 12rpx;
						}
					}
				}

				.text {
					width: 498rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #484A51;
					line-height: 30rpx;


					.text-A {
						font-weight: 400;
						font-size: 24rpx;
						color: #484A51;
						margin-bottom: 8rpx;

						span {
							font-weight: 500;
							font-size: 24rpx;
							color: #00CBCE;
							margin-right: 12rpx;
						}
					}

					.logistics-msg {
						font-weight: 400;
						font-size: 24rpx;
						color: #484A51;
					}
				}
			}

			.takeState:before {
				content: "";
				position: absolute;
				width: 2rpx;
				height: 130%;
				top: 17rpx;
				border-left: 2rpx dashed #00CBCE;
			}
		}

		.address:not(:last-child) {
			.takeState1:before {
				content: "";
				position: absolute;
				width: 2rpx;
				height: 130%;
				top: 40rpx;
				border-left: 2rpx dashed #898A8F;
			}
		}

		.iconImage {
			bottom: -100rpx;
			left: 50%;
			transform: translateX(-50%);

			position: absolute;
		}

		.closeAddressIcon {
			width: 64rpx;
			height: 64rpx;
		}
	}
</style>